<!-- 订单详情 -->
<template>
	<!-- 滚动区域 -->
	<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 93vh;margin: 0;padding: 0;" @scroll="scroll"
		scroll-with-animation="true">
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 订单详情
				<button class="cu-btn round cu-btn round bg-blue" style="margin-left: 40vw;"
					@click="backOrderList()">返回订单列表</button>
			</view>
		</view>
		<view class="cu-list menu-avatar" v-for="(item,index) in goodList" :key="index">
			<view class="cu-item ">
				<view class="cu-avatar radius lg" style="width: 150rpx;height: 150rpx;margin: 0;padding: 0;">
					<image :src="item.introduceImage" class="image_wrapper"></image>
				</view>
				<view class="content" style="padding-left: 11vw;">
					<view class="text-pink">
						<view class="text-cut">{{item.commodityName}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<span style="padding-right: 20rpx;">数量：{{item.quantity}}</span>
							<span style="padding-right: 20rpx;">单位：{{item.unit}}</span>
							<span>单价：{{item.price}}元</span>
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-black text-lg">{{item.expense}}元</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: 'orderDetail',
		props: {
			goodList: {
				type: Array
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		mounted() {},
		computed: {},
		methods: {
			// 调用父组件方法，返回到 订单列表
			backOrderList() {
				this.$emit("changeStatus")
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail
					.scrollTop //滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
			},
		}
	}
</script>

<style lang="scss">
	.image_wrapper {
		background-size: cover;
		width: 100%;
		height: 100%;
	}
</style>
